// 定义全局变量 tasks
let tasks = [];

// 窗口加载事件
window.addEventListener('load', function () {
    // 从本地存储获取任务数据
    tasks = getLocalStorage() || [];
    console.log(tasks);
    renderTasks(filterTasks(tasks, 'all'));  // 默认渲染全部任务
});

// 获取元素
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category = document.querySelector('.category');
let searchInput = document.querySelector('.search input');

// 添加按钮事件
addBtn.addEventListener("click", function () {
    const taskText = inputText.value.trim();
    if (taskText !== "") {
        // 创建新任务对象
        const task = {
            id: new Date().getTime(), // 使用时间戳作为ID以确保唯一性
            text: taskText,
            completed: false
        };
        tasks.push(task);
        saveToLocalStorage(); // 保存到本地存储
        renderTasks(filterTasks(tasks, 'all')); // 更新显示
        inputText.value = ''; // 清空输入框
    } else {
        alert("请输入内容");
    }
});

// 分类过滤事件
category.addEventListener('click', function (e) {
    if (e.target.tagName === 'BUTTON') {
        const filter = e.target.dataset.filter;
        renderTasks(filterTasks(tasks, filter));  // 根据筛选条件渲染数据
    }
});

// 任务列表点击事件处理（编辑、删除、状态切换）
ul.addEventListener('click', function (e) {
    if (e.target.classList.contains('delBtn')) removeTask(e);
    if (e.target.classList.contains('editBtn')) editTask(e);
    if (e.target.type === 'checkbox') changeStatus(e);
});

// 渲染任务函数
function renderTasks(tasks) {
    ul.innerHTML = '';
    tasks.forEach(function (task) {
        const li = createTaskElement(task);
        ul.appendChild(li);
    });
    updateStats();
}

// 创建单个任务的HTML元素
function createTaskElement(task) {
    const li = document.createElement("li");
    li.dataset.taskId = task.id;
    li.innerHTML = `
        <div class="left">
            <input type="checkbox" ${task.completed ? 'checked' : ''}>
        </div>
        <span class="${task.completed ? 'line' : ''}" id="taskText${task.id}">${task.text}</span>
        <div class="btn-group">
            <button class="editBtn">编辑</button>
            <button class="delBtn" data-id="${task.id}">删除</button>
        </div>`;
    
    // 删除按钮事件
    li.querySelector('.delBtn').addEventListener('click', function (e) {
        removeTask(task.id, e);
    });

    // 复选框事件
    const checkbox = li.querySelector('input[type="checkbox"]');
    checkbox.addEventListener('change', function () {
        const taskId = parseInt(li.dataset.taskId);
        const taskItem = tasks.find(t => t.id === taskId);
        if (taskItem) {
            taskItem.completed = checkbox.checked;
            li.querySelector('span').classList.toggle('line', checkbox.checked);
            saveToLocalStorage(); // 保存到本地存储
            updateStats();
        }
    });

    return li;
}

// 搜索功能
searchInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') {
        const query = searchInput.value.trim();
        if (query !== '') {
            const filteredTasks = tasks.filter(task => task.text.includes(query));
            renderTasks(filteredTasks);
            searchInput.value = '';
        } else {
            alert('请在搜索框中输入内容');
        }
    }
});

// 删除任务
function removeTask(id, e) {
    tasks = tasks.filter(task => task.id !== id);
    saveToLocalStorage();
    e.target.closest('li').remove();
    updateStats();
}

// 更新统计数据
function updateStats() {
    const all = tasks.length;
    const completed = tasks.filter(task => task.completed).length;
    const uncompleted = all - completed;

    document.querySelector('.footer span:nth-child(1)').textContent = `全部${all}`;
    document.querySelector('.footer span:nth-child(2)').textContent = `已完成${completed}`;
    document.querySelector('.footer span:nth-child(3)').textContent = `未完成${uncompleted}`;
}

// 数据保存至本地存储
function saveToLocalStorage() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 从本地存储获取数据
function getLocalStorage() {
    return JSON.parse(localStorage.getItem('tasks'));
}

// 分类过滤函数
function filterTasks(tasks, filter) {
    switch (filter) {
        case 'completed':
            return tasks.filter(task => task.completed);
        case 'uncompleted':
            return tasks.filter(task => !task.completed);
        default:
            return tasks;
    }
}

// 编辑任务函数（假设需要实现）
function editTask(e) {
    const taskId = parseInt(e.target.closest('li').dataset.taskId);
    const taskTextElement = e.target.closest('li').querySelector('span');
    const newText = prompt('编辑任务', taskTextElement.textContent);
    if (newText !== null && newText.trim() !== '') {
        const task = tasks.find(t => t.id === taskId);
        if (task) {
            task.text = newText.trim();
            saveToLocalStorage();
            renderTasks(filterTasks(tasks, 'all'));
        }
    }
}

// 切换任务状态函数（已在复选框事件中实现）
function changeStatus(e) {
    const taskId = parseInt(e.target.closest('li').dataset.taskId);
    const task = tasks.find(t => t.id === taskId);
    if (task) {
        task.completed = e.target.checked;
        saveToLocalStorage();
        updateStats();
    }
}